<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<div class="left-panel-search">
					<el-input
						v-model.trim="reqParams.sn"
						autofocus
						clearable
						prefix-icon="el-icon-search"
						placeholder="输入 SN 查询"
						@keyup.enter="search1" />
					<el-button icon="el-icon-search" type="primary" :disabled="!reqParams.sn" @click="search2" />
				</div>
			</div>
			<div class="right-panel">
				<div class="right-panel-search"></div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<el-table ref="tableRef" row-key="id" :data="tableData" style="width: 100%; height: 100%;">
				<el-table-column type="index" width="40" align="center" />
				<el-table-column prop="badCode" label="不良代码" align="center" width="120" />
				<el-table-column prop="badContent" label="不良内容" align="center" width="320" />
				<el-table-column prop="result" label="操作" width="200">
					<template #default="scope">
						<el-switch v-model="scope.row.result" size="large" />
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="描述" align="center">
					<template #default="scope">
						<el-input v-model.trim="scope.row.remark" maxlength="256" show-word-limit />
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<div class="footer-right">
				<el-button round :loading="isSaveing" :disabled="!tableData.length" type="primary" @click="submit">
					提交
				</el-button>
			</div>
		</el-footer>
	</el-container>
</template>

<script>
export default {
    data() {
        return {
            isSaveing: false,
            reqParams: {
                sn: '',
            },
            formData: {},
            tableData: [],
        };
    },
    methods: {
        async search1() {
            await this.getData();
            this.reqParams.sn = '';
        },
        async search2() {
            await this.getData();
        },
        async getData() {
            this.formData = {};
            this.tableData = [];

            if (!this.reqParams.sn) {
                return;
            }

            const resp = await this.$API.reworkdoc.bysn.get(this.reqParams.sn);
            this.formData = resp.data;
            if (!this.formData || !this.formData.templateItems) {
                this.$message.warning(`没找到条码 "${this.reqParams.sn}" 对应的返工单据`);
                return;
            }

            this.tableData = this.formData.templateItems;
        },
        async submit() {
            if (!this.tableData.some(s => s.result)) {
                this.$alert("请至少选择一项不良内容再提交", "提示", { type: "warning" });
                return;
            }

            this.isSaveing = true;
            const resp = await this.$API.reworkdoc.complete.post(this.formData);
            this.isSaveing = false;
            if (resp.code == 200) {
                this.$message.success("提交成功");
                this.tableData = [];
            } else {
                this.$alert(resp.message, "提示", { type: "error" });
            }
        },
    },
};
</script>

<style scoped>
.footer-right {
    float: right;
}
</style>
